<template>
  <div>
    <XmTable :config="{
      ...editTableConfig,
      getParams: getEditTableParams,
      columns: getEditTableColumns(),
    }" class="table" ref="editTable">
      <div slot="filter">
        <el-form :inline="true" class="pl-20">
          <el-form-item label="范围" v-xmbz-permission="'inquiry_abnormal_notice_all'" v-show="['3-1','3-2'].includes(activeTab.value)">
            <div class="form-all" >
              <el-tooltip content="去除勾选，将只能查看到自己提交的工单记录" placement="top-start">
                <i class="el-icon-info fz-24 mr-5"></i>
              </el-tooltip>
              <el-checkbox size='small' class="mr-10" border v-model="isCheckAll" @change="handleAllChange">
                查看所有人提交记录
              </el-checkbox>
            </div>
          </el-form-item>
          <el-form-item label="创建时间" v-show="activeTab.value != '3-3'">
            <el-date-picker v-model="editTableForm.time" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
              size='small' :clearable='false' :default-time="['00:00:00', '23:59:59']">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="后台单号">
            <el-input size='small' v-model="editTableForm.xmbzNo" placeholder="后台单号"></el-input>
          </el-form-item>
          <el-form-item label="处理状态" v-show="activeTab.value != '3-3'">
            <XmSelect class="w-100" :options="stateList" v-model="editTableForm.handleState" placeholder="处理状态" clearable size='small'></XmSelect>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="fetch" size='small' plain icon="el-icon-search">查询</el-button>
          </el-form-item>
        </el-form>
      </div>

      <template slot="column-extJson" slot-scope="{data}">
        <div>
          <div v-if="data.beforExtJson.price">
            <div>
              改前总价：<span class="c-red fw-bold">{{ Number(data.beforExtJson.price) / 100 }}元</span>
            </div>
            <div class="goods-item" v-for="(item, i) in data.beforExtJson.list" :key="i">
              {{ item.name }}
              <span>
                （{{ item.originalPrice / 100 }}元）
              </span>
            </div>
          </div>

          <div v-if="data.afterExtJson.price">
            <div>
              改后总价：<span class="c-red fw-bold">{{ Number(data.afterExtJson.price) / 100 }}元</span>
            </div>
            <div class="goods-item" v-for="(item, i) in data.afterExtJson.list" :key="i">
              {{ item.name }}
              <span>
                （{{ item.originalPrice / 100 }}元）
              </span>
            </div>
          </div>
        </div>
      </template>
      <template slot="column-fall" slot-scope="{data}">
        <span class="c-red">
          {{ data.fall == 1 ? '是' : '否' }}
        </span>
      </template>
      <template slot="column-handleState" slot-scope="{data}">
        <el-tag v-if="eidtTableStateMap[data.handleState]"
          :type="eidtTableStateMap[data.handleState].type">{{ eidtTableStateMap[data.handleState].label }}</el-tag>
      </template>
      <template slot="column-source" slot-scope="{data}">
        {{ sourceMap[data.source] }}
      </template>
      <template slot="column-operate" slot-scope="{data}">
        <el-button class="ml-5" v-show="activeTab.value == '3-1' && data.handleState == 1" type="primary" size="mini"
          @click="handleUpdateGoodsOrder(data)">
          处理
        </el-button>
        <el-button class="mt-5 ml-5" v-show="['3-2','3-3'].includes(activeTab.value)" size="mini"
          @click="handleViewGoodsOrder(data)">
          详情
        </el-button>
        <el-button class="mt-5 ml-5" size="mini" @click="viewUpdateGoodsOrderLog(data)">
          日志
        </el-button>
        <el-button type="primary" class="mt-5 ml-5" v-show="activeTab.value == '3-3' && data.remind == 1" size="mini" @click="handleIKnow(data)">
          我已知晓
        </el-button>
      </template>
    </XmTable>

    <orderLogDialog ref="orderLogDialog"></orderLogDialog>
    <handleUpdateGoodsDialog ref="handleUpdateGoodsDialog" @submit="fetch"></handleUpdateGoodsDialog>
  </div>
</template>

<script>
import { editTableConfig } from '../config'
import orderLogDialog from '@/components/dialog/orderLogDialog'
import handleUpdateGoodsDialog from './handleUpdateGoodsDialog'
import { mapGetters } from 'vuex'
import { WorkGoodsSkuModifyDisposeRemind } from '@/api/workorder'

const stateList = [{
  label: '未处理',
  value: 1,
},{
  label: '审核通过',
  value: 2,
},{
  label: '审核未通过',
  value: 3,
},{
  label: '无需处理',
  value: 4,
}]
const eidtTableStateMap = {
  1: {
    label: '未处理',
    type: 'info',
  },
  2: {
    label: '审核通过',
    type: 'success',
  },
  3: {
    label: '审核未通过',
    type: 'danger',
  },
  4: {
    label: '无需处理',
    type: 'info',
  },
}
const sourceMap = {
  1: '异常补单',
  2: '修改订单',
  3: '确认订单',
}

export default {
  props: {
  },
  components: {
    orderLogDialog,
    handleUpdateGoodsDialog,
  },
  data() {
    return {
      editTableConfig,
      eidtTableStateMap,
      sourceMap,
      stateList,
      editTableForm: {
        time: [
          this.dayjs(new Date()).format("YYYY-MM-DD 00:00:00"),
          this.dayjs(new Date()).format("YYYY-MM-DD 23:59:59"),
        ],
        xmbzNo: '',
        handleState: '',
      },
      activeTab: {
        value: ''
      },
      isCheckAll: true,
    }
  },
  computed: {
    ...mapGetters(['permission']),
    isAll() {
      return this.permission['inquiry_abnormal_notice_all'] ?
              this.isCheckAll ? 1
              : 0 : 0
    }
  },
  methods: {
    fetch({ activeTab } = {}) {
      if (activeTab) {
        this.activeTab = activeTab
      }
      this.$refs.editTable && this.$refs.editTable.fetch().then(res => {
        this.$emit('fetch', res)
      })
    },
    getEditTableParams() {
      const pageParams = this.$refs.editTable.getPageParams()
      const params = {
        ...pageParams,
        handleState: this.activeTab.value === '3-3' ? 3 : (this.editTableForm.handleState || undefined),
        xmbzNo: this.editTableForm.xmbzNo,
        remind: this.activeTab.value === '3-3' ? 1 : undefined,
        all: this.activeTab.value === '3-3' ? 0 : this.isAll,
        sort: 'handleState',
        order: 'asc',
      }
      if (this.editTableForm.time && this.editTableForm.time.length && this.activeTab.value != '3-3') {
        params.startTime = this.dayjs(this.editTableForm.time[0])
          .format("YYYY-MM-DD 00:00:00")
        params.endTime = this.dayjs(this.editTableForm.time[1])
          .format("YYYY-MM-DD 23:59:59")
      }
      return params
    },
    getEditTableColumns() {
      const hideMap = {
        '3-1': ['personDispose', 'endTime', 'processingResults'],
        '3-2': ['extJson', 'roleNames'],
        '3-3': ['extJson', 'roleNames'],
      }
      const hideColumns = hideMap[this.activeTab.value]
      return hideColumns ? editTableConfig.columns.filter(item => !hideColumns.includes(item.prop)) : editTableConfig.columns
    },
    handleUpdateGoodsOrder(data) {
      this.$refs.handleUpdateGoodsDialog.show(data, 'edit')
    },
    handleViewGoodsOrder(data) {
      this.$refs.handleUpdateGoodsDialog.show(data, 'view')
    },
    viewUpdateGoodsOrderLog(data) {
      this.$refs.orderLogDialog.show({ orderId: data.orderId })
    },
    handleAllChange() {
      this.$nextTick(() => {
        this.fetch()
      })
    },
    handleIKnow(data) {
      this.$confirm("确认是否知晓?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        WorkGoodsSkuModifyDisposeRemind({id: data.id, orderId: data.orderId}).then(res => {
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.$store.dispatch('getNum')
          this.fetch();
        })
      })
    },
  },
  created() {
    this.userInfo = JSON.parse(window.localStorage.getItem("saber-userInfo")).content
    this.authoritys = this.userInfo.authority.split(',')
  }
}
</script>

<style lang="scss" scoped>
.goods-item {
  border-radius: 4px;
  border: 1px solid #ddd;
  padding: 4px;
  margin-bottom: 5px;
  text-align: center;
}
.form-all {
  display: inline-flex;
  align-items: center;
  font-size: 18px;
  height: 40px;
}
</style>
